<template>
    <div class="sign">
      <div class="login-wrapper">
      <h2 class="login-title">注册</h2>
      <div class="login-cont">
        <div class="login-box margin-b40">
          <img src="../../../../assets/img/icon_phone.png" class="iconimg">
          <yd-input slot="right" v-model="phone" regex="mobile" placeholder="请输入手机号码" class="phone"></yd-input>
        </div>
         <div class="password-box margin-b40">
            <img src="../../../../assets/img/icon_verification code.png" class="iconimg">
            <yd-input slot="right" v-model="code" placeholder="请输入验证码" class="code"></yd-input>
            <yd-sendcode slot="right" v-model="start" @click.native="sendCode" type="warning"></yd-sendcode>
        </div>
        <div class="login-box margin-b40">
            <img src="../../../../assets/img/icon_password.png" class="iconimg">
          <yd-input slot="right" type="password" v-model="password" placeholder="请输入密码" class="password"></yd-input>
        </div>
        <div class="login-btn" @click="sign()">注&nbsp;册</div>
        <div class="login-jump">
          <div class="jump-sgin">
            <div class="jump-sgin-rack">
              已有账号
            </div>
            <div class="jump-sgin-btn" @click="blank()">
              返回登录
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
import apis from '../../../../../static/js/apis.js'
export default {
  components: {
    apis
  },
  data () {
    return {
      phone: '',
      password: '',
      code: '',
      start: false
    }
  },
  methods: {
    sendCode () {
      if (this.phone !== '' && this.phone.length === 11) {
        let qs = require('querystring')
        this.$axios.post(apis + '/user/checkuser',
          qs.stringify({
            username: this.phone
          })
        )
          .then(response => {
            // console.log(response.data)
            if (response.data.code === 200) {
              // console.log(response.data.message)
              this.$dialog.loading.open('发送中...')
              setTimeout(() => {
                this.start = true
                this.$dialog.loading.close()
                this.$dialog.toast({
                  mes: '已发送',
                  icon: 'success',
                  timeout: 1500
                })
              }, 1000)
            } else {
              this.$dialog.loading.open('发送中...')
              setTimeout(() => {
                this.start = true
                this.$dialog.loading.close()
                this.$dialog.toast({
                  mes: response.data,
                  icon: 'error',
                  timeout: 1500
                })
              }, 1000)
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.alert({mes: '手机号为空或不存在!'})
          })
      } else {
        this.$dialog.alert({mes: '手机号为空或不正确!'})
      }
    },
    sign () {
      if (this.phone === '' || this.password === '' || this.code === '') {
        this.$dialog.alert({mes: '信息不能为空!'})
      } else {
        let qs = require('querystring')
        this.$axios.post(apis + '/user/add',
          qs.stringify({
            username: this.phone,
            code: this.code,
            password: this.password
          })
        )
          .then(response => {
            if (response.data.code === 200) {
              this.$router.push({
                path: '/Success'
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    blank () {
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style scoped>
.sign{
  position: fixed;
  top:0;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.login-title{
  font-size: 24px;
  font-weight: bold;
  padding:0 40px;
  margin:145px 0;
}
.login-cont{
  overflow: hidden;
  padding: 0 40px;
}
.login-box{
  width: 100%;
  display: flex;
  height: 40px;
  border-bottom: 1px solid #c4c4c4;
}
.phone{
  flex:1;
  font-size: 14px;
}
.password-box{
  width: 100%;
  display: flex;
  height: 40px;
  border-bottom: 1px solid #c4c4c4;
}
.iconimg{
  width: 15px;
  height: 20px;
  margin-right: 10px;
  margin-top: 10px;
}
.pssword{
  flex:1;
  font-size: 14px;
}
.margin-b40{
  margin-bottom: 40px;
}
.login-btn{
  width: 100%;
  border-radius: 10px;
  background: #ffd602;
  color:#fff;
  font-size: 15px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 25px;
}
.jump-sgin{
  display: flex;
}
.jump-sgin-rack{
  flex:1;
  text-align: right;
  font-size: 14px;
  color:#666;
  margin-right: 5px;
}
.jump-sgin-btn{
  flex:1;
  text-align: left;
  font-size: 14px;
  color:#ffd602;
  margin-left: 5px;
}
</style>
